<template>
    <div id="big" style="width: 100%;">
        <div id="c" style="height: 20%;">
            <el-form ref="form" :model="params">
                <el-container>
                    <el-form-item>
                        <el-input v-model="params.materialName" placeholder="物品名称"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: 10px">
                        <el-input v-model="params.unit" placeholder="单位"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: 10px">
                        <el-button type="primary" @click="search">模糊搜索</el-button>
                        <el-button type="primary" @click="ok" style="margin-left: 10px">确定选中</el-button>
                    </el-form-item>
                </el-container>
            </el-form>
            <el-divider></el-divider>
        </div>

        <div id="a" style="width: 15%;height: 80%;overflow-y: scroll">
            <el-card class="box-card" style="width: 95%;height: 99%;overflow: hidden">
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-card>
        </div>

        <div id="b" style="width: 84%;margin-left: 1%;height: 80%;overflow-y: scroll">
            <el-table
                    :data="showData"
                    @row-click="handleRowClick"
                    border
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="编号">
                </el-table-column>
                <el-table-column
                        prop="materialName"
                        label="物品名称">
                </el-table-column>
                <el-table-column
                        prop="brand"
                        label="品牌">
                </el-table-column>
                <el-table-column
                        prop="unitModel"
                        label="规格型号">
                </el-table-column>
                <el-table-column
                        prop="unit"
                        label="单位">
                </el-table-column>
            </el-table>
            <el-divider></el-divider>
            <el-footer class="case-list-footer">
                <el-pagination
                        style="margin: 10px auto"
                        background
                        layout="total , sizes ,prev, pager, next,jumper"
                        :page-sizes="[5,10,15,20]"
                        :total="pageResult.total"
                        :page-size="pageResult.size"
                        class="pagination"
                        @current-change="handleIndexChange"
                        @size-change="handleSizeChange"
                >
                </el-pagination>
            </el-footer>
        </div>





    </div>
</template>

<script>

    import  MaterialClassService from '../../../model/mfy/MaterialClassService.js'
    const materialClass= MaterialClassService.getInstance();


    export default {
        name: "ProjectTypeBigData",
        data(){
            return{
                data: [], //tree数据
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                params:{},
                pageResult:{},
                showData:[],
                checked:[],

            }
        },
        methods:{
            list(){

                materialClass.list(this.params).then((response)=>{
                    this.data=response.data.data.data;
                    this.pageResult=response.data.data.materialClass;
                    this.showData=response.data.data.materialClass.records

                })
            },
            handleIndexChange(index){
                this.params.page = index
                this.list()
            },
            handleSizeChange(size){
                this.params.size = size
                this.list()
            },
            search(){
                this.params.page=1
                this.list()
            },
            handleNodeClick(data) {
                this.showData=[]
                this.pageResult.records.forEach(i=>{
                    if(i.mateTypeId==data.id){
                        this.showData.push(i);
                    }
                })
            },
            handleSelectionChange(value){
                this.checked=value;
            },
            ok(){
                this.$emit("checked",this.checked)
            },
            handleRowClick(row){
              console.log("aaa");
                this.$emit('row',row)
            }
        },
        swtch:{

        },
        created() {
            this.list()
        }
    }
</script>

<style scoped>
    #a{
        width: 100px;
        float: left;
    }
    #b {
        width: 1000px;
        float: left;
    }
    #big{
        width: 1200px;
        height: 500px;
    }

</style>
